'use strict';

define(function(require,exports,module){
	var React = require('react');
	var $ = require('jquery');
	var Highcharts = require('highcharts');
	
	module.exports = React.createClass({

		getInitialState:function(){
			var data = [];

			if(!this.props.data){
				$.ajax({
					url:this.props.url,
					data:{},
					dataType:'json',
					type:'post',
					success:function(data){
						data = data;
					},
					error:function(xhr,status,err){
						console.error(this.props.url,status,err.toString());
					}

				});
			}else{
				data = this.props.data;
			}

			return {
				data:data
			};
		},
		componentDidMount:function(){
			if(this.state.data){
				var categories = [];
				var series_array_data = [];
				
				for(var i=0;i < this.state.data.length;i++){
					categories.push(this.state.data[i].time);
					series_array_data.push(this.state.data[i].value);
				}

				var series_array = [{'name':this.props.title,'data':series_array_data}];
			}

			var desc = this.props.yName;
			
			new Highcharts.Chart({
				chart: {
		            renderTo: 'register_column_diagram',
		            polar: true,
		            type: 'line'
		        },
				title: {
		            text: this.props.title
		        },
		        subtitle: {
		            text: this.props.description
		        },
		        xAxis: {
		            categories: categories
		        },
		        yAxis: {
		            title: {
		                text: this.props.yName + this.props.yUnit
		            }
		        },
                tooltip: {
					formatter: function () {
		                var s = '<b>' + this.x + '时</b>：'+desc+'<b>'+Highcharts.numberFormat(this.y,0,'.',',')+'</b>';
		                return s;
		            },
					crosshairs: true,
                    shared: true
                },
		        plotOptions: {
		            spline: {
		                marker: {
		                    radius: 4,
		                    lineColor: '#666666',
		                    lineWidth: 1
		                }
		            }
		        },
		        series: series_array
			});
		},
		render:function(){
			return (

				<div className={this.props.className} id="register_column_diagram"></div>
				);
		}
	});

});